<template>
  <div class="activity">
    <page-header title="科教链课程研发中心 "></page-header>
    <scroll class="content" :data="list" ref="scroll" :class="{'loading': loading}"
            :pullup="true" :pulldown="true" @scrollToEnd="_more" @pullingDown="_refash">
      <div>
        <search @search="_search"></search>
        <div class="banner-wrapper">
          <swiper class="banner-swiper" :options="swiperOption" v-if="banner && banner.length">
            <swiper-slide class="banner-swiper-item" v-for="(item, index) in banner" :key="index">
              <div class="banner-item" @click="_turn(item)">
                <div class="img"><img :src="item.img"></div>
                <div class="zhi">直营</div>
                <div class="info">
                  <h3>{{item.title}}</h3>
                  <p>年龄：{{item.age}}</p>
                  <p>日期：{{item.date}}</p>
                  <p>地址：{{item.address}}</p>
                </div>
                <div class="bottom">
                  <p class="discount"><span>{{item.discount}}</span>秒杀</p>
                  <countdown :data="item.timeLeft"></countdown>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <nav-list></nav-list>
        <ul class="inner" v-if="list && list.length">
          <p class="inner-title">精品推荐</p>
          <li v-for="(item, index) in list" :key="index" class="inner-item" >
            <div class="main" @click="_turn(item)">
              <img :src="item.img">
              <div class="text">{{item.des}}</div>
              <div class="info">
                <span>{{item.title}}</span>
                <p>年龄：{{item.age}}</p>
                <p>日期：{{item.date}}</p>
                <p>地址：{{item.address}}</p>
                <p>时长：{{item.time}}</p>
                <p>价格：{{item.peopleNum}}{{item.price}}元</p>
              </div>
            </div>
            <ul v-if="item.preview && item.preview.length">
              <li v-for="(item2, index2) in item.preview" :key="index2" class="preview-item" @click="_turnPreview(item2)">
                <div>
                  <h4>{{item2.type}} | {{item2.title}}</h4>
                  <p>{{item2.text}}</p>
                </div>
                <img :src="item2.img">
              </li>
            </ul>
          </li>
          <p class="nomore" v-if="nomore">没有更多</p>
        </ul>
      </div>
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
  import PageHeader from 'components/page-header'
  import Search from 'components/search'
  import Scroll from 'components/scroll/scroll'
  import NavList from 'components/nav-list'
  import Countdown from 'components/countdown'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import * as exampleApi from 'api/example'
  import { commonOption } from 'api/config'

  export default {
    components: {
      PageHeader,
      Search,
      Scroll,
      NavList,
      Countdown,
      swiperSlide,
      swiper
    },
    data () {
      return {
        list: [],
        banner: [],
        page: 1,
        pageSize: 2,
        type: '',
        text: '',
        loading: false,
        nomore: false,
        swiperOption: {
          slidesPerView: 'auto',
          spaceBetween: 15
        }
      }
    },
    created() {
      this._initData()
      this._initBanner()
    },
    methods: {
      _search(val, type) {
        this.$router.push({
          path: '/personal/activity',
          query: {
            type: type,
            text: val
          }
        })
      },
      _more() {
        if (this.nomore) {
          return
        }
        this.page ++
        this._initData()
      },
      _refash() {
        this.page = 1
        this.loading = true
        this._initData()
      },
      _initBanner() {
        exampleApi.modePost('/weixin/activitiyList', {
          discount: true
        }).then(res => {
          if (res.data.data) {
            let activitiyList = res.data.data.list
            let responseList = []
            activitiyList.forEach(item => {
              let nowDate = new Date()
              let discountDate = item.discounttime
              let time = discountDate - nowDate
              let h = time / 3600000
              let m = time % 3600000 / 60000
              let s = time % 3600000 % 60000 / 1000
              responseList.push({
                id: item.id,
                title: item.name,
                age: item.age,
                date: item.days,
                address: item.address,
                img: commonOption.host + '/' + (item.cover.split('@')[0]),
                discount: item.discountmoney + '元优惠券',
                timeLeft: [h, m, s]
              })
            })
            this.banner = responseList
          }
        })
      },
      _initData() {
        // 发送请求 mock
        exampleApi.modePost('/weixin/activitiyList', {
          page: this.page,
          size: this.pageSize,
          recommend: 1,
          orders: 'orders'
        }).then(res => {
          if (res.data.data) {
            let activitiyList = res.data.data.list
            if (activitiyList.length > 0) {
              this.toFor(0, activitiyList, [], res.data.data.total)
            }
          }
        })
      },
      toFor (index, activitiyList, responseList, total) {
        exampleApi.modePost('/weixin/activitiyPrice', {
          activitiyid: activitiyList[index].id
        }).then(priceRes => {
          let priceList = priceRes.data.data
          exampleApi.modePost('/weixin/activitiyArticle', {
            activitiyid: activitiyList[index].id
          }).then(articleRes => {
            let articleList = articleRes.data.data
            let preview = []
            articleList.forEach(article => {
              preview.push({
                id: article.id,
                title: article.title,
                type: '课前预习',
                text: article.summary,
                img: commonOption.host + '/' + article.cover
              })
            })
            responseList.push({
              id: activitiyList[index].id,
              title: activitiyList[index].name,
              des: activitiyList[index].intro,
              age: activitiyList[index].age,
              date: activitiyList[index].days,
              time: activitiyList[index].time,
              address: activitiyList[index].address,
              peopleNum: priceList[0] ? priceList[0].name : '',
              price: priceList[0] ? priceList[0].money : 0,
              img: commonOption.host + '/' + (activitiyList[index].cover.split('@')[0]),
              preview: preview
            })
            if (index + 1 === activitiyList.length) {
              if (this.page === 1) {
                // 初始 或者刷新
                this.list = responseList
                this.nomore = false
              } else {
                responseList.forEach(item => {
                  this.list.push(item)
                })
              }
              if (this.loading) {
                this.$refs.scroll && this.$refs.scroll.scrollFinishPullDown()
                this.loading = false
              }
              // nomore
              if (this.page * this.pageSize >= total) {
                this.nomore = true
              }
            } else {
              this.toFor(index + 1, activitiyList, responseList, total)
            }
          })
        })
      },
      _turn(item) {
        this.$router.push({
          path: `/personal/activity/detail${item.id}`
        })
      },
      _turnPreview(item) {
        this.$router.push({
          path: `/personal/camp/detail${item.id}`
        })
      }
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .activity{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #e6e6e6;
    .content{
      position: relative;
      height:calc(~"100% - 84px");
      overflow: hidden;
      &::after {
        position: absolute;
        display: none;
        content: '';
        top: 10px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        background: url('../../assets/image/loading.gif') no-repeat center / 40px auto;
      }
      .banner-wrapper{
        width: 100%;
        height: 260px;
        box-sizing: border-box;
        padding: 20px 15px 0px;
        .banner-swiper{
          font-size: 0;
          height: 100%;
          .banner-swiper-item{
            display: inline-block;
            width: 435px;
            height: 220px;
            background-color: #f2f2f2;
            box-shadow: 0px 2px 7px 0px
            rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            box-sizing: border-box;
            overflow:hidden

          }
        }
        .banner-item{
          position: relative;
          width: 100%;
          height: 220px;
          .img{
            width: 100%;
            height: 100%;
            img{
              width: 100%;
              height: auto;
            }
          }
          .zhi{
            position:absolute;
            left: 0;
            top: 0;
            width: 62px;
            height: 40px;
            background-color: #e54228;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
            color: #ffffff;
          }
          .info{
            position:absolute;
            top: 20px;
            right: 20px;
            width: 200px;
            height: 142px;
            background-color: rgba(255, 255, 255, 0.8);
            box-sizing: border-box;
            padding-left: 15px;
            color: #00103f;
            h3{
              font-size: 22px;
              padding: 13px 0;
              font-weight: bold;
            }
            p{
              font-size: 16px;
              margin-top: 8px;
              letter-spacing: -1px;
            }
          }
          .bottom{
            position:absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 46px;
            background-color: rgba(0, 0, 40, 0.9);
            display:flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 20px;
            .discount{
              font-size: 20px;
              color: #ed686d;
              font-weight: bold;
              span{
                margin-right: 20px;
                font-weight: bold;
                &::before{
                  display: inline-block;
                  vertical-align: bottom;
                  margin-right: 5px;
                  width: 23px;
                  height: 23px;
                  content: '';
                  background: url('../../assets/image/icon_timer.png') no-repeat center / 100%;
                }
              }

            }
          }
        }
      }
      .inner{
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
        padding: 24px 18px;
        background-color: #ffffff;
        .inner-title{
          font-size: 28px;
          color: #264d9f;
        }
        .inner-item{
          margin-top: 20px;
          width: 100%;
          box-sizing: border-box;
          border-radius: 8px;
          border: 1px solid #cccccc;
          overflow:hidden;
          .main{
            position: relative;
            width: 100%;
            height: 260px;
            overflow:hidden;
            img{
              width: 100%;
              height: auto;
            }
            .text{
              position: absolute;
              width: 100%;
              left: 0;
              bottom: 0;
              height: 70px;
              line-height: 35px;
              box-sizing: border-box;
              padding-left: 230px;
              padding-right: 10px;
              overflow: hidden;
              font-size: 18px;
              color: #ffffff;
              background-color: rgba(0,0,40,0.9);
            }
            .info{
              position: absolute;
              top: 12px;
              left: 12px;
              width: 205px;
              height: 230px;
              background: #867177 url('../../assets/image/info_bg.png') no-repeat center / 100% auto;
              box-shadow: 1px 2px 7px 0px
              rgba(0, 0, 0, 0.2);
              border-radius: 8px;
              display: flex;
              flex-direction: column;
              box-sizing: border-box;
              padding: 0 12px;
              span{
                font-size: 22px;
                color: #ffffff;
                text-align: center;
                padding: 16px 0;
                border-bottom: 2px solid #fff;
                margin-bottom: 5px;
              }
              p{
                font-family: MicrosoftYaHei;
                margin-top: 5px;
                font-size: 8px;
                line-height: 26px;
                letter-spacing: -1px;
                color: #ffffff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            &::after{
              position: absolute;
              right: 0;
              top: 0;
              content: '招募中';
              width: 80px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background-color: #e54228;
              color: #fff;
            }
          }
          .preview-item{
            width: 100%;
            box-sizing: border-box;
            padding: 15px 16px 20px 18px;
            display:flex;
            border-bottom: 1px solid #cccccc;
            &:nth-last-child(1) {
              border-bottom: none;
            }
            img{
              flex: 0 0 109px;
              width: 109px;
              height: 109px;
              background-color: #e6e6e6;
            }
            div{
              flex: 1;
              padding-right: 40px;
              display:flex;
              flex-direction: column;
              justify-content: space-between;
              h4{
                font-size: 26px;
                font-weight: bold;
                color: #333333;
              }
              p{
                font-size: 20px;
                line-height: 34px;
                color: #333333;
              }
            }
          }
        }
      }
      .nomore{
        font-size: 22px;
        color: #999999;
        text-align: center;
        padding: 20px 0;
      }
    }
    .content.loading{
      &::after {
        display: block;
      }
    }
  }
</style>
